<template>
<div>
    <div class="mgb10 pull-right">
      
    </div>
    <el-table :data="travellers" border fit @selection-change="selectRefundItems">
      <el-table-column prop="name" label="游客姓名" width="120"/>
      <el-table-column label="凭证">
        <template slot-scope="scope">
          <a :href="scope.row.voucherFileUrl" target="_parent">{{scope.row.voucherFileName}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="90">
        <template slot-scope="scope">{{OrderTravellerStatus[scope.row.status + '']}}</template>
      </el-table-column>
      <el-table-column prop="refundStatus" label="退款状态" align="center" width="100">
        <template slot-scope="scope">{{OrderTravellerRefundStatus[scope.row.refundStatus + '']}}</template>
      </el-table-column>
      <el-table-column label="售价" align="center" width="140">
        <template slot-scope="scope">￥{{order.price/100}}</template>
      </el-table-column>
      <el-table-column label="退款金额" align="left" class-name="nopadcell" width="180">
        <template slot-scope="scope">
          <to-cent-input 
            v-if="scope.row.refundStatus==0" 
            v-show="selected.indexOf(scope.row) >= 0"
            v-model.number="scope.row.refundAmount" 
            placeholder="填写退款金额"/>
          <span v-else>￥{{scope.row.refundAmount/100}}</span>
        </template>
      </el-table-column>
      <el-table-column type="selection" :selectable="refundable"/>
    </el-table>
    <el-row class="mgt10">
        <el-col :span="20">
          <el-input v-model="remark" placeholder="请填写退款备注"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="refund()" style="width:100%"
            :disabled="selected.length == 0" >申请退款</el-button>
        </el-col>
    </el-row>
</div>
</template>

<script>
import { Orders, Refund } from '@/store/api'
import * as Constants from '@/constants'
import ToCentInput from '@/components/to-cent-input'

export default {
  name: 'order-refund',
  components: {
    ToCentInput
  },
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      ...Constants,
      travellers: [],
      selected: [],
      remark: null,
      uploading: false
    }
  },
  created () {
    this.loadTravellers()
  },
  methods: {
    loadTravellers() {
      Orders.listTravellers(this.order.orderNumber).then(data => {
        this.travellers = data
      })
    },
    refund() {
      let isInputLegal = this.selected.length > 0 && this.selected.every(traveller => {
        return traveller.refundAmount > 0
      })

      if (!isInputLegal) {
        this.$notify.warning({
          title: '操作有误',
          message: '退款金额必须大于0',
          offset: 100,
          duration: 2000
        })
      } else {
        let formdata = {
          'orderNumber': this.order.orderNumber,
          'remark': this.remark,
          'items': this.selected.map(t => {
            return {
              'travellerId': t.id,
              'travellerStatus': t.status,
              'refundAmount': t.refundAmount
            }
          })
        }
        this.uploading = true
        Refund.apply(formdata).then((refund) => {
          this.$router.push({path: '/refund/show', query: {'refundNumber': refund.refundNumber}})
        })
      }
    },
    refundable(row, idx) {
      return row.refundStatus === 0
    },
    selectRefundItems(travellers) {
      this.selected = travellers
      // setup default refund amount value
      travellers.forEach(traveller => {
        traveller.refundAmount = traveller.refundAmount ? traveller.refundAmount : this.order.price
      })
    }
  }
}
</script>
